<template>
	<div id="zone">
		<p>企业专区 Enterprise Zone</p>
		<img :src="$store.state.url+'/img/lfximg/2.jpg'"  @click="displ">
		<!-- "$store.state.url+'/lfximg/img/2.jpg'" -->
		<div id="boo" v-show="flag">
			<div id="first">
				<h2>
					请输入兑换码
				</h2>
				<input type="text" v-model="val" placeholder="您的兑换码" @keyup.enter="undispl"/>
				<button type="button" v-show="flag" @click="undispl" >
					确定
				</button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				val: ""
				
			}

		},
		methods: {
			displ(el) {
				window.scrollTo(0, 0)
				if (this.flag == false) {
					this.flag = !this.flag;
					// console.log(this.flag)
				} else {
					this.flag = !this.flag;
				}

			},
			undispl(){
				// console.log(111111)
				if (this.flag == false) {
					this.flag = !this.flag;
				} else {
					if(this.val==520.){
						alert("暂时还未开通,敬请期待!!"+this.val);
						this.flag = !this.flag;
					}
					else{
						alert("兑换码不对哟")
					}
				}
			},
			
		}
	}
</script>

<style scoped="scoped" lang="scss">
	#zone {
		width: 100%;
		margin: 0 auto;
		padding-bottom: 100px;

		p {
			width: 100%;
			height: 100px;
			font-size: 26px;
			color: #000;
			line-height: 100px;
			text-align: center;
		}

		img {
			width: 100%;
		}

		::-webkit-input-placeholder {
			font-size: 18px;
			color: red;
			text-indent:.5rem;
		}

		#boo {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 333;
			background-color: rgba(0, 0, 0, .7);

			#first {
				width: 400px;
				height: 200px;
				background-color: white;
				text-align: center;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -200px;
				margin-top: -100px;
				border-radius: 10px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				input {
					height: 30px;
					width: 200px;
					margin-bottom: 20px;
					padding-left: 10px;
				}
				button {
					padding:0 10px;
					width: 80px;

				}

				h2 {
					color: #8B462A;
					margin-bottom: 20px;
				}
			}
		}
	}
</style>
